<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Foundation -->
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/normalize.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<title>Rencontres</title>
</head>
<body class="antialiased">
	<jsp:include page="/administration/inc_testLogin.jsp"></jsp:include>
	<jsp:include page="/inc_menu.jsp"></jsp:include>
	<div class="large-11 large-centered columns">
		<c:choose>
			<c:when test="${fn:length(tours) > 0 }">
				<c:forEach var="tour" items="${tours }">
					<div class="row">
						<div class="large-12 columns">
							<h3>
								<c:if test="${tour.matchs.size() == 1 }">Finale</c:if>
								<c:if test="${tour.matchs.size() == 2 }">Demi-Finale</c:if>
								<c:if test="${tour.matchs.size() == 4 }">Quart-Finale</c:if>
								<c:if test="${tour.matchs.size() > 4 }">Tour n°${tour.numero }</c:if>
							</h3>
							<c:forEach var="match" items="${tour.matchs }" varStatus="loop">
								<div class="panel"
									${!loop.last ? 'style="margin-bottom: 0px; border-bottom: none;"':''}>
									<div class="row">
										<div class="large-2 columns">
											<c:choose>
												<c:when test="${match.etat == 'Prevu' }">
									Prévu
									</c:when>
												<c:when test="${match.etat == 'EnCours' }">
									En cours
									</c:when>
												<c:when test="${match.etat == 'Termine' }">
									Terminé
									</c:when>
											</c:choose>
											<c:if
												test="${ tour.matchs.size() == 1 && match.getEtat() == 'Termine' && match.getIdEquipeGagnante() == match.getEquipe1().getIdEquipe()}">
												<c:set var="cupEquipe1"
													value="<img src='img/cup32.png' style='margin-right: 10px;' />"></c:set>
											</c:if>
											<c:if
												test="${ tour.matchs.size() == 1 && match.getEtat() == 'Termine' && match.getIdEquipeGagnante() == match.getEquipe2().getIdEquipe()}">
												<c:set var="cupEquipe2"
													value="<img src='img/cup32.png' style='margin-left: 10px;' />"></c:set>
											</c:if>
										</div>
										<div class="large-3 columns" style="text-align: right;">
											${cupEquipe1} ${match.equipe1.nom }</div>
										<div class="large-2 columns" style="text-align: center;">
											<c:choose>
												<c:when test="${match.etat == 'Prevu'}">
													<a data-tooltip class="has-tip" title="Détails du match"
														href="administration?action=editMatch&id=${match.idMatch }">
														- </a>
												</c:when>
												<c:otherwise>
													<!-- Calcul du score total -->
													<c:set var="idEquipe1" value="${match.equipe1.idEquipe }" />
													<c:set var="score1" value="0" />
													<c:set var="score2" value="0" />
													<c:forEach var="but" items="${match.buts }">
														<c:choose>
															<c:when
																test="${but.auteur.equipe.idEquipe == idEquipe1 }">
																<c:set var="score1" value="${score1 + 1 }" />
															</c:when>
															<c:otherwise>
																<c:set var="score2" value="${score2 + 1 }" />
															</c:otherwise>
														</c:choose>
													</c:forEach>
													<c:if test="${ match.getIdEquipeGagnante() > -1 }">
														<c:set var="score1Color"
															value="${ match.getIdEquipeGagnante() == match.getEquipe1().getIdEquipe() ? 'color: green' : 'color: red' }" />
														<c:set var="score2Color"
															value="${ match.getIdEquipeGagnante() == match.getEquipe2().getIdEquipe() ? 'color: green' : 'color: red' }" />
													</c:if>
													<c:if test="${ match.getIdEquipeGagnante() == -1 }">
														<c:set var="score1Color"
															value="${ score1 == score2 ? 'color: black;' : (score1 > score2 ? 'color: green;' : 'color: red;') }" />
														<c:set var="score2Color"
															value="${ score1 == score2 ? 'color: black;' : (score2 > score1 ? 'color: green;' : 'color: red;') }" />
													</c:if>
													<c:set var="cupEquipe1" value=""></c:set>
													<c:set var="cupEquipe2" value=""></c:set>

													<!-- Fin -->
													<a data-tooltip class="has-tip" title="Détails du match"
														href="administration?action=editMatch&id=${match.idMatch }"><span
														style="${score1Color}">${score1 }</span> - <span
														style="${score2Color}">${score2 }</span></a>
												</c:otherwise>
											</c:choose>
										</div>
										<div class="large-5 columns" style="text-align: left;">
											${match.equipe2.nom } ${cupEquipe2}</div>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</c:forEach>
				<hr />
			</c:when>
			<c:otherwise>
				<div class="row">
					<div class="large-12 columns">
						<c:set var="nbEquipes" value="${equipes.size() }" />
						<div style="text-align: center;">
							<c:choose>
								<c:when
									test="${nbEquipes == 2 || nbEquipes == 4 || nbEquipes == 8 || nbEquipes == 16 || nbEquipes == 32}">
									<a href="administration?action=demarrerTournoi"
										class="button large">Démarrer le tournoi</a>
								</c:when>
								<c:otherwise>
					Il faut 2, 4, 8, 16 ou 32 équipes pour commencer un tournoi.
				</c:otherwise>
							</c:choose>
						</div>
					</div>
				</div>
			</c:otherwise>
		</c:choose>
	</div>

	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery')
				+ '.js><\/script>');
	</script>

	<script src="js/foundation.min.js"></script>
	<script src="js/foundation/foundation.section.js"></script>
	<script>
		$(document).foundation();
	</script>
</body>
</html>